<template>
  <div class="opinion flex js-ct align-center">
    <div class="opinion-box person-bg">
      <div
        class="tab-box textperson-t3 person-bg flex js-sp align-center point bdb-borderBase"
      >
        <div class="flex js-st">
          <div
            class=" tab text-14"
            @click="changeTab(1)"
            :class="{
              'textperson-t2 text-bold active-line':
                state.active === 1 && state.isadd,
            }"
          >
            {{ $t("footer.feedback") }}
          </div>
          <div
            class="tab text-14 textperson-t3"
            @click="changeTab(2)"
            :class="{
              'textperson-t2 text-bold active-line':
                state.active === 2 || !state.isadd,
            }"
          >
            {{ $t("feedback.myback") }}
          </div>
        </div>
        <img
          class="updata"
          src="@/assets/images/updata.png"
          v-if="state.active === 1"
          alt=""
        />
        <img src="@/assets/images/letter.png" v-else alt="" />
      </div>
      <div class="opinion-content">
        <Opinion
          v-on:success="submit"
          :isadd="state.isadd"
          :detailID="state.detailID"
          v-if="state.active === 1"
        />
        <Myopinion
          v-on:success="submit"
          @changetab="changeTab"
          v-if="state.active === 2"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Opinion from "@/components/content/opinion/opinion.vue";
import Myopinion from "@/components/content/opinion/myopinion.vue";
import { reactive, onBeforeUnmount } from "vue";
import { useStore } from "vuex";
export default {
  components: { Opinion, Myopinion },
  setup() {
    const $store = useStore();
    const state = reactive({
      active: 1,
      isadd: true,
      detailID: null,
    });
    const changeTab = (i) => {
      state.active = i;
      state.isadd = true;
    };
    // 提交
    const submit = (val) => {
      state.active = val.active;
      if (val.active === 1) {
        state.detailID = val.id;
        state.isadd = false;
      }
    };
    onBeforeUnmount(() => {
      $store.commit("exchange/SET_REDIRECT_URL", "");
    });
    return {
      state,
      changeTab,
      submit,
    };
  },
};
</script>

<style scoped lang="less">
.opinion {
  width: 100%;
  padding: 30px 0 60px 0;
}
.opinion-box {
  width: 684px;
  min-height: 739px;
}
.tab-box {
  width: 100%;
  height: 48px;
  padding: 0 30px;
  box-sizing: border-box;
}
.tab {
  min-width: 56px;
  height: 100%;
  line-height: 48px;
  margin-inline-end: 30px;
  position: relative;
}
.opinion-content {
  padding: 30px 30px;
  box-sizing: border-box;
}
.updata {
  width: 34px;
  height: 34px;
  display: block;
}
.is-rtl {
  .opinion-box {
    :deep(.el-input__suffix) {
      left: 5px;
      right: auto;
    }
    :deep(.el-textarea .el-input__count) {
      left: 10px;
      right: auto;
    }
  }
}
</style>
